<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>微博</title>
    <link rel="stylesheet" href="./style/weibo.css" type="text/css">
    <script src="../lib/react.development.js"></script>
    <script src="../lib/react-dom.development.js"></script>
    <script src="../lib/babel.min.js"></script>
    <script src="./node_modules/axios/dist/axios.min.js"></script>
</head>
<body>
    <div class="jyArea">

    </div>

    <script type="text/babel">

        const request = axios.create({
            baseUrl: "https://192.168.12.31:8081"
        })
        request.interceptors.response.use(res=>{
            const {ok,msg} = res.data;
            if(ok===-1){
                alert(masg);
                return new Promise(()=>{})
            }
            return res.data;
        })

        class App extends React.Component {

            content = React.creatRef();
            // 添加微博
            async addWeibo (){
                // 获取微博
            const content = this.content.current.value.trim();
            // 判断是否有微博内容
            if(content.length===0){
                alert('请输入微博内容')
                return;
            }
            const result = await request.post('/weibo',{
                content
            })
            this.content.current.value = null;
            console.log(result);
            }
            render(){
                return(
                    <>
                    <div className="takeComment">
                        <textarea ref={this.content} name="textarea" className="takeTextField" id="tijiaoText"></textarea>
                        <div className="takeSbmComment">
                           <input onClick={this.addWeibo.bind(this)} type="button" className="inputs" value=""/> 
                        </div>   
                    </div>

                    <div className="commentOn">
                        <div className="noContent" style={{display:this.state.contentList.length===0 ?"block":"none"}}>暂无留言</div>
                        <div className="messList">
                            {
                                this.state.contentList.map(item=>{
                                    <div key={item._id} className="reply">
                                        <p className="replyContent">{item.content}</p>
                                        <p className="operation">
                                            <span className="replyTime">{item.addtime}</span>
                                            <span className="handle">
                                                <a href="" className="top">{item.topNum}</a>
                                                <a href="" className='down_icon'>{item.downNum}</a>
                                                <a href="" className='cut'>删除</a>
                                            </span>
                                        </p>
                                    </div>
                                })
                            }
                        </div>
                        <div className="page">
                            <a href=""className="active">1</a>
                            <a href="">2</a>
                            <a href="">3</a>
                        </div>
                    </div>
                    </>
                )
            }
        }
        ReactDOM.createRoot(document.getElementById("jyArea")).render(<App />)
    </script>
</body>
</html>